<template>
  <div class="container">
    <!-- 搜索工作栏 -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="100px"
      class="search">
      <el-form-item label="伙伴名称" prop="partnerName">
        <el-input v-model="queryParams.partnerName" placeholder="请输入伙伴名称" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="伙伴类型" prop="partnerType" v-if="tableVisible===false">
        <el-select v-model="queryParams.partnerType" placeholder="请选择伙伴类型" clearable size="small">
          <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COOPERATIVE_PARTNER_PARTNER_TYPE)" :key="dict.value"
            :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间" prop="createTime">
        <el-date-picker v-model="queryParams.createTime" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss"
          type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
      <el-form-item class="search-btn">
        <el-button type="primary" size="medium" @click="tableVisible=true">图表</el-button>
        <el-button size="medium" @click="tableVisible=false">列表</el-button>
      </el-form-item>
    </el-form>
    <div v-if="tableVisible" class="card-panel">
      <div class="boxCard">
        <ul class="tabCard" :class="[cardVisible===1 ? 'tabCard-selected' :'' ]" @click="cardVisible=1">
          <li>
            <ul>
              <li><img src="@/assets/images/export.png" alt="" class="img-color3"></li>
              <li>
                <p>合作专家</p>
                <p>农业相关博士、教授、研究院</p>
              </li>
            </ul>
          </li>
          <li class="rightData"><span>{{ this.exportTotal }}</span>人</li>
        </ul>
        <ul class="tabCard" :class="[cardVisible===2 ? 'tabCard-selected' :'' ]" @click="cardVisible=2">
          <li>
            <ul>
              <li>
                <img src="@/assets/images/school.png" alt="" class="img-color2">
              </li>
              <li>
                <p>合作院校</p>
                <p>国家重点高校</p>
              </li>
            </ul>
          </li>
          <li class="rightData"><span>{{ this.schoolTotal }}</span>所</li>
        </ul>
        <ul class="tabCard" :class="[cardVisible===3 ? 'tabCard-selected' :'' ]" @click="cardVisible=3">
          <li>
            <ul>
              <li>
                <img src="@/assets/images/company.png" alt="" class="img-color1 ">
              </li>
              <li>
                <p>合作单位</p>
                <p>中国科学院/省级农科院/省级植保站</p>
              </li>
            </ul>
          </li>
          <li class="rightData"><span>{{ this.companyTotal }}</span>个</li>
        </ul>
      </div>
      <div v-if="cardVisible===1">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="8" :lg="8" v-for="(item, index) in list" :key="index">
            <el-card class="detailCard">
              <img :src="item.partnerImg" alt="">
              <div class="rightContent">
                <p>{{item.partnerName}}</p>
                <p>简介：</p>
                <p class="multiple-line">{{item.partnerIntro}}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <pagination v-if="total> 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                    @pagination="getList" class="pagination" :layout="'total, prev, pager, next, jumper'" />
      </div>
      <div v-if="cardVisible===2">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="8" :lg="8" v-for="(item, index) in list" :key="index">
            <el-card class="detailCard">
              <img :src="item.partnerImg" alt="">
              <div class="rightContent">
                <p>{{item.partnerName}}</p>
                <p>简介：</p>
                <p class="multiple-line">{{item.partnerIntro}}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <pagination v-if="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
          @pagination="getList" class="pagination" :layout="'total, prev, pager, next, jumper'" />
      </div>
      <div v-if="cardVisible===3">
        <el-row :gutter="24">
          <el-col :xs="24" :sm="8" :lg="8" v-for="(item, index) in list" :key="index">
            <el-card class="detailCard">
              <img :src="item.partnerImg" alt="">
              <div class="rightContent">
                <p>{{item.partnerName}}</p>
                <p>简介：</p>
                <p class="multiple-line">{{item.partnerIntro}}</p>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <pagination v-if="total> 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
                    :show="false" @pagination="getList" class="pagination" :layout="'total, prev, pager, next, jumper'" />
      </div>
    </div>
    <div v-else class="card-panel">
      <el-card>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
              v-hasPermi="['cooperative:partner:create']">新增</el-button>
          </el-col>
<!--          <el-col :span="1.5">-->
<!--            <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"-->
<!--              :loading="exportLoading" v-hasPermi="['cooperative:partner:export']">导出</el-button>-->
<!--          </el-col>-->
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <!-- 列表 -->
        <el-table v-loading="loading" :data="list" border>
          <el-table-column label="伙伴名称" align="center" prop="partnerName" />
          <el-table-column label="伙伴类型" align="center" prop="partnerType">
            <template v-slot="scope">
              <dict-tag :type="DICT_TYPE.COOPERATIVE_PARTNER_PARTNER_TYPE" :value="scope.row.partnerType" />
            </template>
          </el-table-column>
          <el-table-column label="伙伴简介" align="center" prop="partnerIntro" show-overflow-tooltip />
          <el-table-column label="创建时间" align="center" prop="createTime" width="180">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template v-slot="scope">
              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                v-hasPermi="['cooperative:partner:update']">修改</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
                v-hasPermi="['cooperative:partner:delete']">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <div style="text-align: center">
          <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        </div>
        <!-- 操作工具栏 -->
      </el-card>
    </div>

    <!-- 对话框(添加 / 修改) -->
    <el-dialog :title="title" :visible.sync="open" width="500px" v-dialogDrag append-to-body class="addDialog">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="伙伴名称" prop="partnerName">
          <el-input v-model="form.partnerName" placeholder="请输入伙伴名称" />
        </el-form-item>
        <el-form-item label="伙伴类型" prop="partnerType">
          <el-select v-model="form.partnerType" placeholder="请选择伙伴类型" style="width:100%">
            <el-option v-for="dict in this.getDictDatas(DICT_TYPE.COOPERATIVE_PARTNER_PARTNER_TYPE)" :key="dict.value"
              :label="dict.label" :value="parseInt(dict.value)" />
          </el-select>
        </el-form-item>
        <el-form-item label="伙伴简介" prop="partnerIntro">
          <el-input v-model="form.partnerIntro" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="伙伴图片">
          <imageUpload v-model="form.partnerImg" :limit='1' />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  createPartner,
  deletePartner,
  exportPartnerExcel,
  getPartner,
  getPartnerPage,
  getPartnerSum,
  updatePartner
} from "@/api/cooperative/partner";
import ImageUpload from '@/components/ImageUpload';

export default {
  name: "Partner",
  components: {
    ImageUpload,
  },
  data () {
    return {
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 合作伙伴列表
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 9,
        partnerName: null,
        partnerType: null,
        partnerIntro: null,
        partnerImg: null,
        createTime: [],
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        partnerName: [{ required: true, message: "伙伴名称不能为空", trigger: "blur" }],
        partnerType: [{ required: true, message: "伙伴类型不能为空", trigger: "change" }],
        partnerIntro: [{ required: true, message: "伙伴简介不能为空", trigger: "blur" }],
      },
      tableVisible: true,
      cardVisible: 1,
      companyTotal: 0,
      exportTotal: 0,
      schoolTotal: 0,
    };
  },
  created () {
    this.queryParams.partnerType = 1;
    this.getList();
  },
  watch: {
    tableVisible (val) {
      if (val) {
        this.cardVisible = 1;
        this.queryParams.partnerType = 1;
        this.queryParams.pageSize = 9;
      } else {
        this.queryParams.partnerType = null;
        this.queryParams.pageSize = 10;
      }
      this.queryParams.pageNo = 1;
      this.getList();
    },
    cardVisible (val) {
      this.queryParams.pageNo = 1;
      this.queryParams.partnerType = val;
      this.getList()
    }
  },
  mounted () {
    //获得合作伙伴统计
    getPartnerSum().then(response => {
      response.data.filter(item => {
        if (item.type === 3) {
          return this.companyTotal = item.sum
        } else if (item.type === 2) {
          return this.schoolTotal = item.sum
        } else {
          return this.exportTotal = item.sum
        }
      })
    })
  },
  methods: {
    /** 查询列表 */
    getList () {
      this.loading = true;
      // 执行查询
      getPartnerPage(this.queryParams).then(response => {
        this.list = response.data.list;
        this.total = response.data.total;
        this.loading = false;
      });
    },
    /** 取消按钮 */
    cancel () {
      this.open = false;
      this.reset();
    },
    /** 表单重置 */
    reset () {
      this.form = {
        id: undefined,
        partnerName: undefined,
        partnerType: undefined,
        partnerIntro: undefined,
        partnerImg: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset();
      this.open = true;
      this.title = "添加合作伙伴";
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset();
      const id = row.id;
      getPartner(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改合作伙伴";
      });
    },
    /** 提交按钮 */
    submitForm () {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 修改的提交
        if (this.form.id != null) {
          updatePartner(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.open = false;
            this.getList();
          });
          return;
        }
        // 添加的提交
        createPartner(this.form).then(response => {
          this.$modal.msgSuccess("新增成功");
          this.open = false;
          this.getList();
        });
      });
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const id = row.id;
      this.$modal.confirm('是否确认删除合作伙伴编号为"' + id + '"的数据项?').then(function () {
        return deletePartner(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport () {
      // 处理查询参数
      let params = { ...this.queryParams };
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal.confirm('是否确认导出所有合作伙伴数据项?').then(() => {
        this.exportLoading = true;
        return exportPartnerExcel(params);
      }).then(response => {
        this.$download.excel(response, '合作伙伴.xls');
        this.exportLoading = false;
      }).catch(() => { });
    },

  }
};
</script>
<style lang="scss" scoped>
.container {
  padding: 24px;
  background-color: rgb(240, 242, 245);
  .search {
    padding: 32px 0;
    height: 100px;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 24px;
    .search-btn {
      float: right;
      padding-right: 40px;
      .el-button--primary {
        background: #4362ff;
        border-color: #4362ff;
      }
      .el-button--default {
        color: #4362ff;
        border-color: #4362ff;
      }
    }
  }
  .card-panel {
    min-height: 1030px;
    ul,
    li {
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .boxCard {
      height: 150px;
      border-radius: 8px;
      background: #fff;
      display: flex;
      .tabCard {
        width: 33%;
        padding: 30px 50px;
        float: left;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        li {
          float: left;
        }
        li:nth-child(2) {
          padding-left: 20px;
          p:first-child {
            font-size: 16px;
            font-weight: bold;
          }
          p:last-child {
            color: #999999;
            font-size: 14px;
          }
        }
        .rightData {
          width: 100px;
          span {
            font-size: 30px;
            font-weight: bold;
          }
        }
      }
      .tabCard-selected {
        color: #4362ff;
        li {
          img {
            opacity: 1;
            border: 1px solid #ffffff;
            border-radius: 50%;
          }
          .img-color1 {
            background: linear-gradient(180deg, #9ca4fe 0%, #7dcbff 100%);
            box-shadow: 0px 3px 6px 1px #4362ff;
          }
          .img-color2 {
            background: linear-gradient(180deg, #fe8ba7 0%, #faae91 100%);
            box-shadow: 0px 2px 6px 1px #fd587e;
          }
          .img-color3 {
            background: linear-gradient(180deg, #58eab0 0%, #76dbdf 100%);
            box-shadow: 0px 3px 6px 1px #53f6bd;
          }
        }
        li:nth-child(2) {
          p:last-child {
            color: #4362ff;
          }
        }
      }
      .el-card ::v-deep .el-card__body {
        padding: 30px;
      }
    }
    .detailCard {
      margin-top: 24px;
      height: 300px;
      padding: 20px 0;
      width: 100%;
      img {
        float: left;
        width: 120px;
        height: 120px;
      }
      .rightContent {
        width: calc(100% - 170px);
        float: left;
        padding-left: 50px;
        p:first-child {
          font-size: 18px;
          font-weight: bold;
          padding-bottom: 5px;
          border-bottom: 2px solid #4362ff;
        }
        p:last-child {
          color: #a29f9f;
          font-weight: bold;
        }
        .multiple-line {
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 8;
          -webkit-box-orient: vertical;
        }
      }
    }
    .pagination {
      margin: 30px auto;
      width: 500px;
      background: rgb(240, 242, 245);
    }
  }
}
</style>
